<template>
	<view>
		<view class="item">
			<uni-row>
				<uni-col :span="8" style="text-align: center;">
					<view class="image">
						<image :src="imageSrc" :mode="imageMode"></image>
					</view>
					<view class="price">
						<span class="text">{{price}}</span><span class="amount">/{{unit}}</span>
					</view>
				</uni-col>
				<uni-col :span="16">
					<view class="desc">
						<text class="uni-h6 title">{{title}}</text><br/>
						<text class="time">{{timeSpan}}</text>
						<view class="attributes">
							<uni-row>
								<uni-col :span="8">
									<span class="label">品种</span>
									<span class="value">{{category}}</span>
								</uni-col>
								<uni-col :span="8">
									<span class="label">周期</span>
									<span class="value">{{period}}</span>
								</uni-col>
								<uni-col :span="8">
									<span class="label">产量</span>
									<span class="value">{{output}}</span>
								</uni-col>
							</uni-row>
						</view>
						<view>
							<span v-if="tags.length>0" class="tags">{{tags.join('/')}}</span>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	export default {
		name:"adoption-item",
		props: {
			imageSrc:{
				type: String,
				default: '../../static/images/profile/bg.png'
			},
			imageMode:{
				type: String,
				default : 'aspectFit'
			},
			price:{
				type: Number,
				default: 0
			}, 
			unit: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default:''
			},
			timeSpan: {
				type: String,
				default: '-'
			},
			category: {
				type: String,
				default: '-'
			},
			period: {
				type: String,
				default: '-'
			},
			output: {
				type: String,
				default: '-'
			},
			tags: {
				type: Array,
				default: []
			}
		}
	}
</script>

<style lang="less">
	
	.item {
		background-color: #ffffff;
		height: 240rpx;
		width: auto;
		padding: 15rpx 15rpx;
		margin: 20rpx 10rpx;
		border-radius: 8rpx;
		
		image {
			width: 90px;
			height: 90px;
			margin-bottom: 20rpx;
		}
		
		.price{
			text-align: center;
			.text {
				color: red;
			}
		}
		
		.desc {
			.title {
				font-size: 16px;
				font-weight: 800;
				width: 100%;
				padding: 10rpx 5rpx;
			}
			.time {
				font-size: 14px;
				color: gray;
				width: 100%;
				padding: 10rpx 5rpx;
				margin-top: 5rpx;
			
			}
			
			.attributes {
				padding: 5rpx;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
				.label {
					color: gray;
					display: block;
				}
				
			}
			
			.tags {
				margin-top: 25px;
				background-color: #00904b;
				padding: 10rpx 15rpx;
				border-radius: 10rpx;
			}
		}
	}

</style>